<template>
    <div>
      <div style="margin: 10px 0">
        <el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search" v-model="queryForm.mname"></el-input>
        <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
        <el-button type="warning" @click="reset">重置</el-button>
      </div>
  
      <div style="margin: 10px 0;">
        <el-button type="primary" plain @click="handleAdd(null)"><i class="el-icon-circle-plus-outline"></i> 新增</el-button>
      </div>
  
      <el-table :data="tableData" :header-cell-class-name="'headerBg'"
                row-key="id" :default-expand-all="false" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <!-- <el-table-column prop="id" label="ID" width="80" align="center"></el-table-column> -->
        <el-table-column prop="mname" label="名称" align="center"></el-table-column>
        <el-table-column prop="path" label="路径" align="center"></el-table-column>
        <el-table-column prop="pagePath" label="页面路径" align="center"></el-table-column>
        <el-table-column label="图标" class-name="fontSize18" align="center" label-class-name="fontSize12">
          <template slot-scope="scope">
            <span :class="scope.row.icon" />
          </template>
        </el-table-column>
        <el-table-column prop="description" label="描述"></el-table-column>
        <el-table-column prop="sortNum" label="顺序"></el-table-column>
        <el-table-column label="操作"  width="300" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="handleAddz(scope.row.id)" v-if="!scope.row.pid && !scope.row.path"><i class="el-icon-plus"></i>新增子菜单 </el-button>
            <el-button type="text" @click="handleEdit(scope.row)"><i class="el-icon-edit"></i>编辑 </el-button>
            <el-button type="text" @click="handleEditxx(scope.row)" v-if="scope.row.pid"><i class="el-icon-edit"></i>修改目录</el-button>
            <el-popconfirm
                class="ml-5"
                confirm-button-text='确定'
                cancel-button-text='我再想想'
                icon="el-icon-info"
                icon-color="red"
                title="您确定删除吗？"
                @confirm="del(scope.row.id)"
            >
              <el-button type="text" slot="reference"><i class="el-icon-delete"></i>删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 新增框 -->
      <el-dialog title="菜单信息" :visible.sync="dialogFormVisible" width="26%" >
        <el-form label-width="80px" size="small" :model="form" :rules="rules">
          <el-form-item label="名称" prop="mname" style="width: 400px;">
            <el-input v-model="form.mname" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="路径" prop="path" style="width: 400px;" v-if="!handleAdd">
            <el-input v-model="form.path" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="图标" prop="icon" style="width: 400px;">
            <el-select clearable v-model="form.icon" placeholder="请选择" style="width: 100%">
              <el-option v-for="item in options" :key="item.iconName" :label="item.iconName" :value="item.value">
                <i :class="item.value" /> {{ item.iconName }}
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="描述" prop="description" style="width: 400px;">
            <el-input v-model="form.description" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="页面路径" prop="pagePath" style="width: 400px;" v-if="!handleAdd">
            <el-input v-model="form.pagePath" autocomplete="off"></el-input>
          </el-form-item>
          
          <el-form-item label="顺序" prop="sortNum" style="width: 400px;">
            <el-input v-model="form.sortNum" autocomplete="off"></el-input>
          </el-form-item>
          
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="save">确 定</el-button>
          <el-button @click="dialogFormVisible = false">取 消</el-button>
        </div>
      </el-dialog>

      <!-- 新增子菜单框 -->
      <el-dialog title="菜单信息" :visible.sync="dialogFormVisiblez" width="26%" >
        <el-form label-width="80px" size="small" :model="form" :rules="rules">
          <el-form-item label="名称" prop="mname" style="width: 400px;">
            <el-input v-model="form.mname" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="路径" prop="path" style="width: 400px;">
            <el-input v-model="form.path" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="图标" prop="icon" style="width: 400px;">
            <el-select clearable v-model="form.icon" placeholder="请选择" style="width: 100%">
              <el-option v-for="item in options" :key="item.iconName" :label="item.iconName" :value="item.value">
                <i :class="item.value" /> {{ item.iconName }}
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="描述" prop="description" style="width: 400px;">
            <el-input v-model="form.description" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="页面路径" prop="pagePath" style="width: 400px;">
            <el-input v-model="form.pagePath" autocomplete="off"></el-input>
          </el-form-item>
          
          <el-form-item label="顺序" prop="sortNum" style="width: 400px;">
            <el-input v-model="form.sortNum" autocomplete="off"></el-input>
          </el-form-item>
          
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="save">确 定</el-button>
          <el-button @click="dialogFormVisiblez = false">取 消</el-button>
        </div>
      </el-dialog>

      <!-- 修改框 -->
      <el-dialog title="菜单信息" :visible.sync="dialogFormVisibles" width="26%" >
        <el-form label-width="80px" size="small" :model="form" :rules="rules">
          <el-form-item label="名称" prop="mname" style="width: 400px;">
            <el-input v-model="form.mname" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="路径" prop="path" style="width: 400px;">
            <el-input v-model="form.path" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="图标" prop="icon" style="width: 400px;">
            <el-select clearable v-model="form.icon" placeholder="请选择" style="width: 100%">
              <el-option v-for="item in options" :key="item.iconName" :label="item.iconName" :value="item.value">
                <i :class="item.value" /> {{ item.iconName }}
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="描述" prop="description" style="width: 400px;">
            <el-input v-model="form.description" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="页面路径" prop="pagePath" style="width: 400px;">
            <el-input v-model="form.pagePath" autocomplete="off"></el-input>
          </el-form-item>
          
          <el-form-item label="顺序" prop="sortNum" style="width: 400px;">
            <el-input v-model="form.sortNum" autocomplete="off"></el-input>
          </el-form-item>
          
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="update">确 定</el-button>
          <el-button @click="dialogFormVisibles = false">取 消</el-button>
        </div>
      </el-dialog>

      <!-- 修改目录 -->
      <el-dialog title="菜单信息" :visible.sync="dialogFormVisiblesx" width="26%" >
        <el-form label-width="80px" size="small" :model="form" :rules="rules">
          <el-form-item label="选择菜单" style="width: 400px;">
            <el-select clearable v-model="form.pid" placeholder="请选择" style="width: 100%">
              <el-option v-for="item in tableData" :key="item.id" :label="item.mname" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="updatex">确 定</el-button>
          <el-button @click="dialogFormVisiblesx = false">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
//   import {serverIp} from "../../public/config";
  
  export default {
    name: "Menu",
    data() {
      return {
        tableData: [],
        total: 0,
        pageNum: 1,
        pageSize: 15,
        icoName: "",
        form: {},
        queryForm:{
        mname: '',
      },
        dialogFormVisible: false,
        dialogFormVisibles: false,
        dialogFormVisiblez: false,
        dialogFormVisiblesx: false,
        multipleSelection: [],
        options: [],
        mnames:[],
        rules: {
          mname: [
        { required: true, message: '名称不能为空', trigger: 'blur' }
        ],
        path: [
        { required: true, message: '路径不能为空', trigger: 'blur' }
        ],
        icon: [
        { required: true, message: '图标不能为空', trigger: 'blur' }
        ],
        description: [
        { required: true, message: '描述不能为空', trigger: 'blur' }
        ],
        pagePath: [
        { required: true, message: '页面路径不能为空', trigger: 'blur' }
        ],
      }
      }
    },
    created() {
      this.load()
    },
    methods: {
      load() {
        this.request.get("/Menu/findAll", {
            params:{
          mname:this.queryForm.mname,
        }
      }).then(res => {
        // console.log(res);
        this.tableData = res.data
      })
  
        //请求图标的数据
        this.request.get("/Menu/icons").then(res => {
          this.options = res.data
        })
      },
      save(){
        this.$refs['form'].validate((valid) => {
        if (valid) {
        this.request({
          method: "post",
          url: "/Menu/MenuAdd",
          data:{
            "id": this.form.id,
            "mname": this.form.mname,
            "path": this.form.path,
            "icon": this.form.icon,
            "pid": this.form.pid,
            "iconName": this.form.iconName,
            "value": this.form.value,
            "description": this.form.description,
            "pagePath": this.form.pagePath,
            "sortNum": this.form.sortNum,
            "createTime": this.form.createTime,
            "updateTime": this.form.updateTime,
          },
          //请求头
          headers: { 'Content-Type': 'application/json' },
      }).then(res => {
        if(res){//.code === 200
          this.$message.success("保存成功")
          this.dialogFormVisible = false
          this.dialogFormVisiblez = false
          this.load()
        }else{
          this.$message.error("保存失败")
       }
      })
    } else {
      // 校验失败，不执行保存修改操作
    }
  });
  },
  update(){
    this.$refs['form'].validate((valid) => {
    if (valid) {
    this.request(
      {
        method: "post",
        url: "/Menu/MenuUpdate",
        data:{
            "id": this.form.id,
          "mname": this.form.mname,
          "path": this.form.path,
          "icon": this.form.icon,
          "pid": this.form.pid,
          "iconName": this.form.iconName,
          "value": this.form.value,
          "nametype": this.form.nametype,
          "description": this.form.description,
          "pagePath": this.form.pagePath,
          "sortNum": this.form.sortNum,
          "createTime": this.form.createTime,
          "updateTime": this.form.updateTime,
        },
        //请求头
        headers: { 'Content-Type': 'application/json' },
      }).then(res => {
        if(res){//.code === 200
          this.$message.success("修改成功")
          this.dialogFormVisibles = false
          this.load()
          // 修改菜单目录后需要重新登录
            this.$router.push("/login")
            localStorage.removeItem("user")
            this.$message.success("退出成功")
        }else{
          this.$message.error("修改失败")
       }
      })
    } else {
      // 校验失败，不执行保存修改操作
    }
  });
  },
  updatex(){
    this.$refs['form'].validate((valid) => {
    if (valid) {
    this.request(
      {
        method: "post",
        url: "/Menu/updateml",
        data:{
            "id": this.form.id,
          "pid": this.form.pid,
          "mname": this.form.mname,

        },
        //请求头
        headers: { 'Content-Type': 'application/json' },
      }).then(res => {
        if(res){//.code === 200
          this.$message.success("修改成功")
          this.dialogFormVisibles = false

          // 修改菜单目录后需要重新登录
            this.$router.push("/login")
            localStorage.removeItem("user")
            this.$message.success("退出成功")
        }else{
          this.$message.error("修改失败")
       }
      })
    } else {
      // 校验失败，不执行保存修改操作
    }
  });
  },
      handleAdd(id) {
        // console.log(id)
        this.dialogFormVisible = true
        this.form = {}
          this.form.pid = id
      },
      handleAddz(id) {
        // console.log(id)
        this.dialogFormVisiblez = true
        this.form = {}
          this.form.pid = id
      },
      handleEdit(row) {
        this.form = JSON.parse(JSON.stringify(row))
        this.dialogFormVisibles = true
      },
      handleEditxx(row) {
        this.form = JSON.parse(JSON.stringify(row))
        this.dialogFormVisiblesx = true
      },
      del(id){
    this.request.delete("/Menu/MenuDelete" ,{
        params:{
         id:id
        }
      }).then(res =>{
      if(res){
        this.$message.success("删除成功")
        this.load()
      }else{
        this.$message.error("删除失败")
      }
    })
  },
      handleSelectionChange(val) {
        // console.log(val)
        this.multipleSelection = val
      },
      reset() {
        this.queryForm.mname = ""
        this.load()
      },
      handleSizeChange(pageSize) {
        // console.log(pageSize)
        this.pageSize = pageSize
        this.load()
      },
      handleCurrentChange(pageNum) {
        // console.log(pageNum)
        this.pageNum = pageNum
        this.load()
      },
    }
  }
  </script>
  
  
  <style>
  .headerBg {
    background: #eee!important;
  }
  .fontSize18{
    font-size: 18px;
  }
  .fontSize12{
    font-size: 12px;
  }
  </style>
  